<template>
  <el-form :model="formData" ref="DrawerEdit" class="common-drawer-edit">
    <template v-for="(item,key) in option">
      <el-form-item
          :key="key"
          :label="item.label"
          :prop="item.field"
          :rules="item.rules"
          :class="[item.drawerEditWith?'li2':'','common-drawer-edit-li']"
          v-if="Utils.arrayContain(item.routerRole,$store.state.routerRole) && !item.drawerEditShow"
      >
        <!--<span class="common-drawer-edit-li-title" v-if="item.type!=='自定义组件'">-->
        <!-- {{ item.label }}-->
        <!--</span>-->
        <template v-if="item.type==='输入框'">
          <el-input
              :placeholder="'请输入'+item.label"
              v-model="formData[item.field]"
              :disabled="!Utils.arrayContain(item.editRole,$store.state.routerRole)"
              clearable
          />
        </template>
        <template v-if="item.type==='密码框'">
          <el-input
              :placeholder="'请输入'+item.label"
              v-model="formData[item.field]"
              :disabled="!Utils.arrayContain(item.editRole,$store.state.routerRole)"
              show-password
          />
        </template>
        <template v-if="item.type==='文本域'">
          <el-input
              type="textarea"
              :placeholder="'请输入'+item.label"
              v-model="formData[item.field]"
              :autosize="{ minRows: item.minRows, maxRows: item.maxRows}"
              :maxlength="item.maxlength"
              :disabled="!Utils.arrayContain(item.editRole,$store.state.routerRole)"
              show-word-limit
          />
        </template>
        <template v-if="item.type==='单选框'">
          <el-radio-group
              v-model="formData[item.field]"
              :disabled="!Utils.arrayContain(item.editRole,$store.state.routerRole)"
          >
            <el-radio
                v-for="(item2,key2) in item.option"
                :key="key2"
                :label="item2.value"
            >
              {{ item2.label }}
            </el-radio>
          </el-radio-group>
        </template>
        <template v-if="item.type==='多选框'">
          <!--多最少和最多选几个-->
          <template v-if="item.min && item.max">
            <el-checkbox-group
                v-model="formData[item.field]"
                :min="item.min"
                :max="item.max"
                :disabled="!Utils.arrayContain(item.editRole,$store.state.routerRole)"
            >
              <el-checkbox
                  v-for="item2 in item.option"
                  :label="item2.value"
                  :key="item2.value"
              >
                {{ item2.label }}
              </el-checkbox>
            </el-checkbox-group>
          </template>
          <!--没有多最少和最多选几个-->
          <template v-else>
            <el-checkbox-group
                v-model="formData[item.field]"
                :disabled="!Utils.arrayContain(item.editRole,$store.state.routerRole)"
            >
              <el-checkbox
                  v-for="item2 in item.option"
                  :label="item2.value"
                  :key="item2.value"
              >
                {{ item2.label }}
              </el-checkbox>
            </el-checkbox-group>
          </template>
        </template>
        <template v-if="item.type==='下拉框'">
          <!--有分组-->
          <template v-if="item.group">
            <el-select
                :placeholder="'请选择'+item.label"
                v-model="formData[item.field]"
                :filterable="item.filterable"
                :multiple="item.multiple"
                :disabled="!Utils.arrayContain(item.editRole,$store.state.routerRole)"
                clearable
            >
              <el-option-group
                  v-for="group in item.option"
                  :key="group.label"
                  :label="group.label">
                <el-option
                    v-for="item in group.children"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-option-group>
            </el-select>
          </template>
          <!--没有分组-->
          <template v-else>
            <el-select
                :placeholder="'请选择'+item.label"
                v-model="formData[item.field]"
                :filterable="item.filterable"
                :multiple="item.multiple"
                :disabled="!Utils.arrayContain(item.editRole,$store.state.routerRole)"
                clearable
            >
              <el-option
                  v-for="item2 in item.option"
                  :key="item2.value"
                  :label="item2.label"
                  :value="item2.value"
              >
              </el-option>
            </el-select>
          </template>
        </template>
        <template v-if="item.type==='级联选择器'">
          <el-cascader
              :placeholder="'请选择'+item.label"
              v-model="formData[item.field]"
              :filterable="item.filterable"
              clearable
              :options="item.option"
              :props="{ expandTrigger: item.expandTrigger, multiple: item.multiple}"
              :disabled="!Utils.arrayContain(item.editRole,$store.state.routerRole)"
          >
          </el-cascader>
        </template>
        <template v-if="item.type==='日期选择器'">
          <el-date-picker
              :placeholder="'请选择'+item.label"
              v-model="formData[item.field]"
              :type="item.timeType"
              value-format="timestamp"
              :disabled="!Utils.arrayContain(item.editRole,$store.state.routerRole)"
          >
          </el-date-picker>
        </template>
        <template v-if="item.type==='文件上传'">
          <el-checkbox-group v-model="formData[item.field]" v-show="false">
            <el-checkbox label="">验证需要</el-checkbox>
          </el-checkbox-group>
          <common-upload-file
              :disabled="!Utils.arrayContain(item.editRole,$store.state.routerRole)"
              :componentSetOptions="item"
              :uploadValue="formData[item.field]"
          />
        </template>
        <template v-if="item.type==='图片上传'">
          <el-checkbox-group v-model="formData[item.field]" v-show="false">
            <el-checkbox label="">验证需要</el-checkbox>
          </el-checkbox-group>
          <common-upload-img
              :disabled="!Utils.arrayContain(item.editRole,$store.state.routerRole)"
              :componentSetOptions="item"
              :uploadValue="formData[item.field]"
          />
        </template>
        <template v-if="item.type==='自定义组件'">
          <el-checkbox-group v-model="formData[item.field]" v-show="false">
            <el-checkbox label="">验证需要</el-checkbox>
          </el-checkbox-group>
          <component
              :is="item.DrawerEditsChildrenName"
              :props="formData[item.field]"
              :ref="item.ref"
          ></component>
        </template>
      </el-form-item>
    </template>

    <el-form-item class="common-drawer-edit-but" v-if="!titleAddEdit">
      <el-button
          icon="el-icon-close el-icon--left"
          @click="drawerCancel"
      >
        取消
      </el-button>
      <el-button
          type="primary"
          icon="el-icon-check el-icon--left"
          @click="drawerSubmitForm('DrawerEdit')"
      >
        保存
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  components: {},
  props: ['option', 'formData', 'titleAddEdit', 'drawerMethods'],
  data() {
    return {};
  },
  mounted() {
  },
  methods: {
    //点击取消
    drawerCancel() {
      this.HandleUtils.handleParent(this.$parent, this.drawerMethods.drawerCancel)
    },
    //点击保存
    drawerSubmitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.HandleUtils.handleParent(this.$parent, this.drawerMethods.drawerSubmitForm);
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
